<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:easy="http://easyfaces.com.br/easyfaces">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
    <ui:composition template="/template/template.xhtml">
    	<ui:define name="conteudo"> 
			<div id="body-left">
				<div id="topic-pic">
					<h:graphicImage url="#{verMusica.musica.album.artista.imagem}" width="259" height="199" alt="Pic 1" />
				</div>
				<div class="coment">
					<h2>
						<h:outputText value="#{verMusica.musica.nome}" />
					</h2>
					<easy:mp3Player url="/NextFm/musics/#{verMusica.musica.diretorio}"></easy:mp3Player>
				</div>
			</div>
			<div id="body-right">
				<h2>
					<h:outputText value="#{msgs.categoria} " />
					<h:outputText value="#{verMusica.musica.categoria.nome}" />
				</h2>
				<div class="box">
					<h:graphicImage url="#{verMusica.musica.album.imagem}" width="100" height="100" alt="Pic 1" class="left" />
					<table class="info">
						<tr>
							<th><h:outputText value="#{msgs.album}" /></th><td><h:outputText value="#{verMusica.musica.album.nome}" /></td>
						</tr>
						<tr>
							<th><h:outputText value="#{msgs.artista}" /></th><td><h:outputText value="#{verMusica.musica.album.artista.nome}" /></td>
						</tr>
					</table>
					<br />
					<p>
					</p>	
					<div class="clear"></div>
				</div>
				<h:panelGroup rendered="#{sessionScope.usuario != null}">
					<a4j:keepAlive beanName="verMusica" ajaxOnly="true" />
					<a4j:form>
						<table>
							<tr>
								<td colspan="2">
									<h2><h:outputText value="#{msgs.deixecomentario}:" /></h2>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<h:inputText value="#{verMusica.titulo}" style="width:375px" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<h:inputTextarea value="#{verMusica.mensagem}" style="width:375px; height:100px" ></h:inputTextarea>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<a4j:commandButton reRender="comentarios" styleClass="botao" action="#{verMusica.cadastrar}" value="#{msgs.salvar}">
										<f:setPropertyActionListener value="#{sessionScope.usuario.id}" target="#{verMusica.idusuario}"/>
									</a4j:commandButton>
								</td>
							</tr>
						</table>
					</a4j:form>
				</h:panelGroup>
				<br /><br />
				<rich:dataTable id="comentarios" value="#{verMusica.musica.comentarios}" var="comentario" style="width: 100%">
					<rich:column>
						<div class="coment">
							<h2>
								<h:outputText value="#{msgs.escritopor} #{comentario.usuario.nome}" />
							</h2>
							<p>
								<h:outputText value="#{comentario.titulo}" />
							</p>
							<p>
								<h:outputText value="#{comentario.mensagem}" />
							</p>
						</div>
					</rich:column>
				</rich:dataTable>
			</div>
		</ui:define>
    </ui:composition>
</html>